<template>
    <div class="pungent">
         <p><router-link tag="i" class="iconfont icon-left-" to="/"></router-link><input name="sousuo" type="text"><span>搜索</span></p>
        <ul>
            <router-link tag="li" to="">综合排序<i class="iconfont icon-down-"></i></router-link>
            <router-link tag="li" to="">销量最高</router-link>
            <router-link tag="li" to="">距离最近</router-link>
            <router-link tag="li" to="">筛选</router-link>
        </ul>
        <div class="content">
            <dl>
                <dt><img src="../assets/image/lmcs.png" alt=""></dt>
                <dd>
                    <h3>老麻抄手</h3>
                    <p><span> 评价4.7 | 月销573 | 免费配送 </span><span>350m | 45分钟</span></p>
                </dd>
            </dl>
            <div class="datu">
                <dl>
                    <dt><img src="../assets/image/lmcsd.png" alt=""></dt>
                    <dd>
                        <h4>老麻抄手</h4>
                        <p><br>月售6<br><br><span>￥16</span><i>新用户下单立减17元</i></p>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="content">
            <dl>
                <dt><img src="../assets/image/ysm.png" alt=""></dt>
                <dd>
                    <h3>鱼是面(沃尔玛店)</h3>
                    <p><span> 评价4.7 | 月销573 | 免费配送 </span><span>350m | 45分钟</span></p>
                </dd>
            </dl>
            <div class="datu">
                <dl>
                    <dt><img src="../assets/image/ysmd.png" alt=""></dt>
                    <dd>
                        <h4>抄手</h4>
                        <p><br>月售6<br><br><span>￥18</span><i>新用户下单立减17元</i></p>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="wntj">
            <span><i class="i1"></i>为你推荐<i class="i2"></i></span>
        </div>
        <div class="content">
            <dl>
                <dt><img src="../assets/image/sj.png" alt=""></dt>
                <dd>
                    <h3>水萝卜饺子(西环南路店)</h3>
                    <p><span> 评价4.7 | 月销573 | 免费配送 </span><span>350m | 45分钟</span></p>
                </dd>
            </dl>
            <div class="datu">
                <dl>
                    <dt><img src="../assets/image/sjd.png" alt=""></dt>
                    <dd>
                        <h4>韭菜鸡蛋饺子</h4>
                        <p><br>月售6<br><br><span>￥14</span><i>新用户下单立减17元</i></p>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"pungent",
    data(){
        return{
            
        }
    }
}
</script>

<style  scoped lang="less">
.pungent{
    background: #f5f5f5;
    height: 100vh;
        >p{
            display: flex;
            justify-content: space-between;
            background: #fff;
            padding: 0.3rem 0;
            height: 1.1rem;
            color: #000;
            padding-bottom: 0.5rem;
            i{
                font-size: 0.42rem;
                line-height: 1.1rem;
                padding-left: 0.3rem;
            }
            span{
                font-size: 0.42rem;
                line-height: 1.1rem;
                padding-right: 0.3rem;
            }
            input[name="sousuo"]{
                width: 5.3rem;
                height: 0.9rem;
                background: #f4f4f4;
                padding-left: 0.3rem; 
            }  
        }
        ul{
            background: #fff;
            display: flex;
            padding-bottom: 0.5rem;
            li{
                flex: 1;
                text-align: center;
                font-size: 0.42rem;
                i{
                    padding-left: 0.2rem;
                }
            }
        }
        .content{
            background: #fff;
            margin-bottom: 0.3rem;
            >dl{
                display: flex;
                padding-top: 0.45rem;
                height: 1.8rem;
                border-top: 0.01rem solid #ccc;
                border-bottom: 0.01rem solid #ccc;
                dt{
                    width: 1.1rem;
                    height: 1rem;
                    flex: 1;
                    padding: 0 0.3rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                dd{
                    flex: 6;
                    h3{
                        font-size: 0.45rem;
                    }
                    p{
                        display: flex;
                        margin-top: 0.22rem;
                        font-size: 0.22rem;
                        height: 0.45rem;
                        span{
                            height: 0.45rem;
                            &:last-child{
                                flex: 1;
                                text-align: right;
                                padding-right:0.5rem; 
                            }
                        }
                    }
                }
            }
            .datu{
                background: #fff;
                dl{
                    display: flex;
                    padding: 0.4rem 0;
                    dt{
                        padding:0 0.3rem;
                        width: 2.15rem;
                        height: 2.1rem;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    dd{
                        h4{
                            font-size: 0.5rem;
                            color: #118dff;
                        }
                        p{
                            color: #b1b1b1;
                            font-size: 0.28rem;
                            span{
                                margin-top:0.28rem;
                                color: red;
                                font-size: 0.5rem; 
                                padding-right: 0.2rem;
                            }
                            i{
                                margin-top:0.28rem; 
                                border: 0.01rem solid green;
                                padding: 0.01rem;
                                color: green;
                            }
                        }
                    }
                }
            }
        }
        .wntj{
            height: 1.5rem;
            text-align: center;
            span{
                font-size: 0.4rem;
                font-weight: bold;
                line-height: 0.36rem;
            }
        }
    }
</style>
